/*  css 样式初始化  */
*{box-sizing:border-box;}
*:before,*:after{box-sizing: border-box;}
*{margin: 0;padding: 0;}
ul,ol{ list-style: none;}


/*  新增图标的使用   */
.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
 }

a{color: inherit; text-decoration: none;}
img{max-width: 100%;
    max-height: 100%;
    }

/*   style 样式    */
body{background:url(背景图片.jpg);
    width: 100%;
    height: 100%;
}

.globalHeader{ 
    margin: 20px;
}

@media (min-width:500px){
    .globalHeader{
        margin: 100px;
}
}
.searchForm{
    display: flex;  
    justify-content: space-between;
}
@media (min-width:500px){
    .searchForm{
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;             /* 当宽度是固定的时候 可以居中 */
    }
}

.searchForm > input{
    width: 100%;
    margin-right: 10px;
    height: 35px;
    padding: 0 10px;  
    border:1px solid #ddd;  
    border-radius: 4px;
}
.searchForm > button{
    white-space: nowrap;
    height: 23px;
    margin-top: 6px;
    padding: 0 10px;
    border:1px solid #29889D;
    background: #29889D;
    color: #fff;
    border-radius: 4px;
}

@media (min-width:500px){
    .searchForm > button{
        white-space: nowrap;
        height: 35px;
        width: 80px;
        margin-top: -1px;
        padding: 0 10px;
        border:1px solid #29889D;
        background: #29889D;
        color: #fff;
        border-radius: 4px;
    }
}
.globalMain{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.siteList{
    display: flex;
    flex-wrap: wrap;
    margin: 30px;
}
.siteList > li{
    margin: 3px;
}

@media (min-width:500px){
    .siteList > li{
        margin: 10px;
    }
}
    

.siteList .site{
    width: 142px;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: white;
    border:1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
}
.siteList .site > .logo{
    width: 64px;
    height: 64px;
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.siteList .site > .link{
    margin-top: 4px;
}

.siteList .site > .close{
    position: absolute;
    right: 4px;
    top: 2px;
    color: rgb(209, 39, 39);
    cursor: default;
}
@media (min-width:500px){
    .siteList .site:hover > .close{
        display: block;
    }
    .siteList .site > .close{
        display: none;
    }
}


.siteList .addButton{
    background: white;
    border:1px solid #ddd;
    width: 142px;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.siteList .addButton .icon{
    width: 64px;
    height: 64px;  
}

.siteList .addButton .iconWrapper{
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}